<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<svg
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			width="400"
			height="400"
			class="bear"
		>
			<!-- 熊的耳朵 -->
			<g class="bear__ears">
				<!-- 左耳朵 -->
				<g class="bear__ear--left">
					<!-- 绘制左耳朵 -->
					<circle class="ear--out" cx="126" cy="118" r="32" />
					<circle class="ear--inner" cx="126" cy="118" r="16" />
				</g>

				<!-- 右耳朵 -->
				<g class="bear__ear--right">
					<!-- 绘制右耳朵 -->
					<circle class="ear--out" cx="290" cy="118" r="32" />
					<circle class="ear--inner" cx="290" cy="118" r="16" />
				</g>
			</g>

			<!-- 熊的脸 -->
			<g class="bear__face">
				<!-- 绘制脸 -->
				<circle cx="208" cy="190" r="98" />
				<!-- 绘制胡子 -->
				<path
					d="M263.4,217.4c0,34.4-24.7,62.3-55.1,62.3s-55.1-27.9-55.1-62.3s24.1-43.6,54.5-43.6
          S263.4,183,263.4,217.4z"
				/>
			</g>

			<!-- 熊的眼睛 -->
			<g class="bear__eyes">
				<!-- 左眼睛 -->
				<circle class="bear__eye--left" cx="178" cy="160" r="8" />

				<!-- 左眼睛 -->
				<circle class="bear__eye--right" cx="238" cy="160" r="8" />
			</g>

			<!--  熊的鼻子  -->
			<ellipse class="bear__snout" cx="208" cy="204" rx="26" ry="10" />

			<!--  熊的嘴  -->
			<path
				class="bear__mouth"
				d="M243.2,234.2c-20.2,19.2-52,18.4-71.2-1.8"
			/>
		</svg>
	</body>
	<style>
		@layer demo {
			:root {
				--color-1: #8c6239;
				--color-2: #42210b;
				--color-3: #000;
				--color-4: #c69c6d;
			}

			.ear--out,
			.bear__face circle {
				fill: var(--color-1);
			}

			.ear--inner,
			.bear__snout {
				fill: var(--color-2);
			}

			.bear__eyes circle {
				fill: var(--color-3);
			}

			.bear__mouth {
				stroke: var(--color-3);
				stroke-width: 6;
				fill: none;
				stroke-miterlimit: 10;
			}

			.bear__face path {
				fill: var(--color-4);
			}
		}
	</style>
</html>
